<template>
  <div>
    <v-chart :force-fit="true" :height="200" :data="statistics">
      <v-tooltip/>
      <v-axis/>
      <v-legend/>
      <v-stack-area position="date*value" color="title"/>
    </v-chart>
  </div>
</template>

<script>
import sortBy from 'lodash.sortby'

export default {
  name: 'PlaceOrderArea',
  props: {
    dailyStatistics: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      statistics: [],
      scale: [{
        dataKey: 'date',
        type: 'linear',
        tickInterval: 50
      }]
    }
  },
  watch: {
    dailyStatistics: {
      handler: function (value) {
        const temp = []
        value.forEach(item => {
          temp.push({
            date: item.date || '',
            title: '群主',
            value: item.number_of_group_owner_place_order || 0
          })
          temp.push({
            date: item.date || '',
            title: '精英',
            value: item.number_of_elite_place_order || 0
          })
          temp.push({
            date: item.date || '',
            title: '大咖',
            value: item.number_of_strongman_place_order || 0
          })
        })
        this.statistics = sortBy(temp, sort => -sort.value) // 降序排序
      },
      immediate: true
    }
  }
}
</script>

<style scoped>

</style>
